<template>
  <div class="app-container">
    <el-form :inline="true" :model="filters" class="demo-form-inline filter-container" ref="refForm">
      <el-form-item label="类别" prop="typeId">
        <el-select v-model="filters.typeId">
          <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标题：" prop="title">
        <el-input v-model="filters.title" @keyup.enter.native="doGet({ action: 'getGrid' })"></el-input>
      </el-form-item>
      <el-form-item label="发件人:" prop="userName">
        <el-input v-model="filters.userName" @keyup.enter.native="doGet({ action: 'getGrid' })"></el-input>
      </el-form-item>
      <el-form-item label="回复人:" prop="replyName">
        <el-input v-model="filters.replyName" @keyup.enter.native="doGet({ action: 'getGrid' })"></el-input>
      </el-form-item>
      <el-form-item label="状态:" prop="platformState">
        <el-select v-model="filters.platformState">
          <el-option
            v-for="item in consts.INBOX_STATUS"
            :key="item.value"
            :label="item.title"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="会员是否已读:" prop="userState">
        <el-select v-model="filters.userState">
          <el-option
            v-for="item in consts.IS_MEMBER_READ"
            :key="item.value"
            :label="item.title"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="收件时间：" prop="time">
        <el-date-picker
          v-model="filters.time"
          class="filter-item"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd HH:mm:ss"
          align="left"
        ></el-date-picker>
      </el-form-item>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="doGet({ action: 'getGrid' })"
      >搜索</el-button>
      <el-button @click="selfResetForm('refForm')">重置</el-button>
    </el-form>

    <el-table
      :data="tableData.list"
      v-loading="loading"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="类别" align="center">
        <template slot-scope="{row}">
          <span class="text-nowrap">{{row.typeName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="标题" align="center">
        <template slot-scope="{row}">
          <span class="text-nowrap">{{row.title}}</span>
        </template>
      </el-table-column>
      <el-table-column label="收件时间" align="center">
        <template slot-scope="{row}">{{row.receiptTime | toTime}}</template>
      </el-table-column>
      <el-table-column label="会员账号" align="center">
        <template slot-scope="{row}">{{row.userName}}</template>
      </el-table-column>
      <el-table-column label="回复人" align="center">
        <template slot-scope="{row}">{{row.replyName}}</template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="{row}">{{row.platformState | toConverter('INBOX_STATUS')}}</template>
      </el-table-column>
      <el-table-column label="会员是否已读" align="center">
        <template slot-scope="{row}">
          <span v-if="row.platformState == 3">{{row.userState | toConverter('IS_MEMBER_READ')}}</span>
          <span v-else>{{"-"}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="300px">
        <template slot-scope="{row}">
          <el-button
            type="text"
            @click="openDialog({dialogName: 'check-inbox-letter',props:row})"
            v-if="row.platformState !== 2 && roleCheck('inbox-check')"
          >查看</el-button>
          <el-button
            type="text"
            @click="openDialog({dialogName: 'update-inbox-letter',props:row})"
            v-if="row.platformState === 2 && roleCheck('inbox-edit')"
          >编辑</el-button>
          <el-button
            type="text"
            @click="hanleRetract(row)"
            v-if="row.platformState === 2 && roleCheck('inbox-revoke')"
          >撤销</el-button>
          <el-button
            type="text"
            @click="openDialog({dialogName: 'quick-reply-letter',props:row})"
            v-if="row.platformState !== 3 && roleCheck('inbox-reply') && row.platformState !== 2"
          >快速回复</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        background
        @size-change="gridSizeChange"
        @current-change="gridCurrentChange"
        :current-page="filters.page"
        :page-sizes="gridPageSize"
        :page-size="filters.size"
        :layout="gridLayout"
        :total="tableData.total"
      ></el-pagination>
    </div>
    <check-inbox-letter
      v-if="dialogName === 'check-inbox-letter'"
      v-model="dialogVisible"
      :row-data="dialogProps"
      :id="dialogProps.id"
      @submit="submitFinished"
    />
    <quick-reply-letter
      v-if="dialogName === 'quick-reply-letter'"
      v-model="dialogVisible"
      :row-data="dialogProps"
      :id="dialogProps.id"
      @submit="submitFinished"
    />
    <update-inbox-letter
      v-if="dialogName === 'update-inbox-letter'"
      v-model="dialogVisible"
      :row-data="dialogProps"
      :id="dialogProps.id"
      @submit="submitFinished"
    />
  </div>
</template>

<script>
import {
  form, grid, dialog, resetForm,
} from '@/build';
import {
  noticeInBoxManageListApi,
  noticeLetterRevokeApi,
} from '@/services/api/notice';
import { feedbackTypeListApi } from '@/services/api/feedbackType';
import CheckInboxLetter from './checkInboxLetter';
import QuickReplyLetter from './quickReplyLetter.vue';
import UpdateInboxLetter from './updateInboxLetter.vue';

export default {
  name: 'inbox-list',
  mixins: [form, grid, dialog, resetForm],

  components: {
    CheckInboxLetter,
    QuickReplyLetter,
    UpdateInboxLetter,
  },

  props: {
    departmentId: Number,
    workId: Number,
  },

  data() {
    return {
      tableData: {
        list: [],
        total: 0,
      },
      typeList: [],
      // form: {
      //   typeId: undefined,
      //   userState: undefined,
      //   // category: undefined,
      //   title: undefined,
      //   userName: undefined,
      //   replyName: undefined,
      //   platformState: undefined,
      //   time: [
      //     moment().format('YYYY-MM-DD 00:00:00'),
      //     moment().format('YYYY-MM-DD 23:59:59'),
      //   ],
      // },
      filters: {
        typeId: undefined,
        userState: undefined,
        // startDate: undefined,
        // endDate: undefined,
        // category: undefined,
        title: undefined,
        userName: undefined,
        replyName: undefined,
        platformState: undefined,
        time: [
          moment().format('YYYY-MM-DD 00:00:00'),
          moment().format('YYYY-MM-DD 23:59:59'),
        ],
        page: 1,
        size: 20,
      },
      // filterDateType: false,
      // 类别查询条件
      typeFilters: {
        // operator: undefined,
        // date: undefined,
        // type: undefined,
        // theme: undefined,
        // name: undefined,
        // status: '',
      },
    };
  },

  methods: {
    hanleRetract({ id }) {
      this.$confirm('确定要撤销此回复吗？', '撤回回复', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          noticeLetterRevokeApi({
            id,
          }).then(([result, data]) => {
            if (result) {
              this.doGet({ action: 'getGrid' });
              this.$message({
                type: 'success',
                message: '撤回成功!',
              });
            } else {
              this.$message({
                type: 'error',
                message: `撤回失败!${data.message}`,
              });
            }
          });
        })
        .catch(() => {});
    },

    selfResetForm(formName) {
      this.resetForm(formName);
      this.doGet({ action: 'getGrid' });
    },
    // submitFilterForm() {
    //   this.doGet({ action: 'getGrid' });
    // },
  },

  mounted() {
    this.bindGet(noticeInBoxManageListApi, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      beforeSend: (data) => {
        const {
          typeId, userState, title, userName, replyName, platformState, page, size, time,
        } = data;
        let startDate;
        let endDate;
        if (!_.isUndefined(time) && _.isArray(time)) {
          startDate = time[0];
          endDate = time[1];
        } else {
          startDate = undefined;
          endDate = undefined;
        }
        return {
          title,
          userName,
          replyName,
          page,
          size,
          startDate,
          endDate,
          typeId: typeId === -1 ? '' : typeId,
          userState: userState === -1 ? '' : userState,
          platformState: platformState === -1 ? '' : platformState,
        };
      },
    });
    this.bindGet(feedbackTypeListApi, 'typeList', {
      action: 'getTypeList',
      sendingData: 'typeFilters',
      format: (data) => {
        if (_.isArray(data)) {
          data.splice(0, 0, { name: '全部', id: -1 });
          return data;
        }
        return [{ name: '全部', id: -1 }];
      },
    });
    this.getAll();
  },
};
</script>
<style lang="scss" scoped>
.text-nowrap {
  max-width: 300px;
  word-wrap: break-word;
}
.text-tips {
  color: blue;
  cursor: pointer;
}
</style>
